<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        body{
            background-image:url("s.jpg");
        }
        .center{
            background: white;
            width: 400px;
            text-align: center;
            margin: auto;
        }
        .l h1{
             font-family: white;
            width: 150px;
        }
    </style>
</head>
<body>
    <div class="l">
        <h1 >黑马头条</h1>
    </div>
    <div class="center">
        <div>注册详情</div>
        <hr/>
        <form action="#" method="get" autocomplete="off">
            <div>
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username"value="" placeholder="在此出输入用户名"required>
            </div>
            <div>
                <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password"id="password" name="password" placeholder="在此出输入密码"required>
            </div>
            <div>
                <label for="email">邮&nbsp;&nbsp;&nbsp;箱：</label>
                <input type="email"id="email" name="email" value="" placeholder="在此出输入邮箱"required>
            </div>
            <div>
                <label for="tel" >手&nbsp;&nbsp;&nbsp;机：</label>
                <input type="tel"id="tel" name="tel" value=""placeholder="在此出输入手机号码"required>
            </div>
            <hr/>
            <div>
                <label for="gender">性别：</label>
                <input type="radio"id="gender" name="gender" value="man">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio"id="gender" name="gender"value="women">女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div>
                <label for="hobby">爱好:</label>
                <input type="checkbox" id="hobby" name="hobby"value="basketball">篮球
                <input type="checkbox" id="hobby" name="hobby"value="music">音乐
                <input type="checkbox"id="hobby" name="hobby"value="book">看书
            </div>
            <div>
                <label for="birthday">出生日期：</label>
                <input type="date"id="birthday" value="birthday">
            </div>
            <div>
                <label for="city">出生日期：</label>
                <select id="city" name="city">
                    <option>---请选择所在城市---</option>
                    <optgroup label="直辖市">
                        <option>北京</option>
                        <option>上海</option>
                        <option>深圳</option>
                        <option>广州</option>
                    </optgroup>
                    <optgroup label="省会市">
                        <option>湖南</option>
                        <option>西安</option>
                        <option>武汉</option>
                        <option>杭州</option>
                    </optgroup>
                </select>
            </div>
            <hr/>
            <div>
                <label for="desc">个性签名：</label>
                <textarea id="desc" name="desc"rows="5"cols="40"placeholder="请写下你的个性"></textarea>
            </div>
            <hr/>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <hr/>
        </form>

    </div>
</body>
</html>